<template>
  <div>
    <div class="big">
      <div class="head">
        <img
          v-if="parentData.user.head_img"
          :src="$axios.defaults.baseURL + parentData.user.head_img"
          alt=""
        />
        <img v-else src="../../assets/2.jpg" alt="" />
        <div class="user">
          <div class="nickname">{{ parentData.user.nickname }}</div>
          <div class="time">2020-01-01</div>
        </div>
        <div class="huifu">回复</div>
      </div>
      <div class="box">
        <Parent
          v-if="parentData.parent"
          :parentData="parentData.parent"
        ></Parent>
        {{ parentData.content }}
      </div>
    </div>
  </div>
</template>

<script>
import Parent from "../Comment/Parent";
export default {
  components: { Parent },
  props: ["parentData"],
};
</script>

<style lang="less" scoped>
.big {
  margin: 10/360 * 100vw;
  .head {
    display: flex;
    padding: 10/360 * 100vw 0;
    .user {
      flex: 1;
      .nickname {
        font-size: 18/360 * 100vw;
      }
      .time {
        padding-top: 5/360 * 100vw;
        color: #ccc;
        font-size: 14/360 * 100vw;
      }
    }
    img {
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      border-radius: 50%;
      padding-right: 5/360 * 100vw;
    }
  }
  .huifu {
    font-size: 14/360 * 100vw;
    color: #ccc;
  }
  .box {
    //   background-color: pink;
    border-bottom: solid skyblue 2px;
    padding: 5/360 * 100vw 0 10/360 * 100vw 0;
  }
}
</style>